<template>
      <div class="showModalSelect">
            <div class="modle">
                  <div class="modal_header">
                        <img src="../../../assets/doctor.png" class="modal_img">
                  </div>
                  <div class="select-body">
                        <div class="top">
                              <div class="top-title">
                                    小课堂
                              </div>
                        </div>
                        <div class="body_text">
                              <div class="text">
                                    <p>1.陕西省疾控中心最近上线“为爱传递”艾滋病通关答题赢奖品小游戏，本游戏将大家耳熟能详的翻牌子游戏与艾滋病预防知识巧妙结合，要求参与者在特定时间内翻牌子找出对应图标进行选择答题，两者全对才能进入下一环节答题，全程随机设置了30组问题，全部回答对即为成功闯关，成功闯关的参与者后台有用时排名; </p>
                                    <p>2.其中排名前50为一等奖，51到150是二等奖，151到250名为三等奖;</p>
                                    <p> 3.游戏参与者须在2023年11月30日上午8点至2023年12月2日晚8点前进入游戏答题方能算有效参与。登陆游戏须输入本人手机号码，便于后期派发奖品联系。</p>
                              </div>
                        </div>
                        <div class="modle_button">
                              <div class="button">
                                    <van-button color="#117BD6" round type="primary" class="button-primary" @click="PlayDescShow">我知道了</van-button>
                              </div>
                        </div>
                  </div>
            </div>

      </div>
</template>
<script lang="ts" setup name="PlayDesc">
import { ref, defineProps, defineEmits } from 'vue'
const emit = defineEmits(["PlayDescShow"])
const PlayDescShow =() =>{
      emit("PlayDescShow")
}
</script>
<style lang="less" scoped>
.showModalSelect {
      position: fixed;
      top: 125px;
      left: 11%;
      z-index: 2023;
      width: 295px;
      min-height: 257px;

}

.modle {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      position: relative;
      background: #fff;
      border-radius: 16px 16px 16px 16px;
      // align-items: flex-end;
}

.modal_header {
      display: flex;
      justify-content: center;
      position: absolute;
      top: -63px;
      left: 50%;
      transform: translateX(-50%);

      .modal_img {
            width: 65px;
            height: 76px;
      }
}

.select-body {
      width: 100%;
      height: 100%;
      margin: 15px 0 0;
      padding: 0 10px 39px;

      .top {
            display: flex;
            justify-content: center;

            .top-title {
                  width: 100px;
                  height: 27px;
                  background: #117BD6;
                  border-radius: 40px 40px 40px 40px;
                  opacity: 1;

                  font-size: 16px;
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                  text-align: center;
            }
      }

      .body_text {

            display: flex;
            justify-content: center;
            margin: 17px 0 0;

            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
            .text {
                  width: 242px;
                  height: 344px;
                  font-size: 14px;
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 500;
                  color: #3A3A3A;
                  line-height: 16px;

                  p:first-child {
                        margin: 0 0 17px;
                  }

                  p:last-child {
                        margin: 17px 0 0;
                  }
            }
      }

      .modle_button {

            .button {
                  display: flex;
                  justify-content: center;
            }

            .button-primary {
                  width: 142px;
            }

      }

}
</style>
  